<template>
  <div class="mid box sale">
    <div class="left">
      <el-select
        clearable
        placeholder="统计方式"
        size="large"
        v-model="flag"
        @change="changeHandler"
      >
        <el-option label="员工" value="1"></el-option>
        <el-option label="商品类别" value="2"></el-option>
      </el-select>

      <el-select
        clearable
        placeholder="年"
        size="large"
        v-model="searchParams.year"
        @change="getMonth(searchParams.year)"
      >
        <el-option
          v-for="(y, i) in data.year"
          :key="i"
          :label="y"
          :value="y"
        ></el-option>
      </el-select>
      <el-select
        clearable
        placeholder="月"
        size="large"
        v-model="searchParams.month"
      >
        <el-option
          v-for="(m, i) in data.month"
          :key="i"
          :label="m"
          :value="m"
        ></el-option>
      </el-select>
      <div class="staff">
        <el-input
          clearable
          v-if="flag === '1'"
          placeholder="请输入员工工号"
          size="large"
          v-model="searchParams.staff_number"
        ></el-input>
      </div>
      <div class="category">
        <el-select
          clearable
          v-if="flag === '2'"
          placeholder="一类商品"
          size="large"
          v-model="searchParams.oneType"
        >
          <el-option
            v-for="one in goodsSearch.oneTypeList"
            :key="one.category_oneId"
            :label="one.category_oneName"
            :value="one.category_oneId"
          ></el-option>
        </el-select>
        <el-select
          clearable
          v-if="flag === '2'"
          placeholder="二类商品"
          size="large"
          v-model="searchParams.twoType"
        >
          <el-option
            v-for="two in data.twoList"
            :key="two.category_twoId"
            :label="two.category_twoName"
            :value="two.category_twoId"
          ></el-option>
        </el-select>
      </div>
    </div>
  </div>
  <div class="sale-container box">
    <SaleEcharts :searchParams="searchParams"></SaleEcharts>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { useStore } from 'vuex'
import { reqGetYear, reqGetMonth } from '@/api/sale'
import SaleEcharts from '@/components/SaleEcharts'
import dayjs from 'dayjs'
const store = useStore()
const { dispatch, getters } = store
const flag = ref('')
// 改变的方法
const changeHandler = () => {
  searchParams.staff_number = ''
  searchParams.oneType = ''
  searchParams.twoType = ''
}
// 搜索数据
const searchParams = reactive({
  year: '',
  month: '',
  staff_number: '',
  oneType: '',
  twoType: '',
  years: '',
  months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
  days: ''
})
const data = reactive({
  year: [],
  month: [],
  twoList: []
})
// 获取年份的方法
const getYear = async () => {
  const result = await reqGetYear()
  if (result.code === 200) {
    data.year = result.data
    searchParams.years = result.data
  }
}
// 获取月份的方法
const getMonth = async (year) => {
  const result = await reqGetMonth(year)
  if (result.code === 200) {
    data.month = result.data
  }
}
// 获取每月多少天
watch(
  () => searchParams.month,
  (newValue, oldValue) => {
    const date = searchParams.year + '-' + searchParams.month
    searchParams.days = []
    for (let i = 1; i <= dayjs(date).daysInMonth(); i++) {
      searchParams.days[i - 1] = i
    }
  }
)
// 获取所有类别
const getAllTypeList = async () => {
  await dispatch('goods/getAllTypeList')
}
const goodsSearch = computed(() => getters.goodsSearch)
watch(
  () => searchParams.oneType,
  (newValue, oldValue) => {
    if (newValue !== oldValue) searchParams.twoType = ''
    const result = goodsSearch.value.twoTypeList.filter((e) => {
      return e.onetypes[0].category_oneId === newValue
    })
    data.twoList = [...result]
    if (searchParams.oneType === '') {
      searchParams.twoType = ''
    }
  }
)
getYear()
getAllTypeList()
</script>

<style lang="scss" scoped>
.sale {
  .left {
    & > .el-select:first-child {
      :deep(.el-select__caret) {
        color: white;
      }
      :deep(.el-input__wrapper) {
        background: rgb(64, 158, 255) !important;
      }
      :deep(.el-input__inner) {
        color: white;

        &::placeholder {
          color: white;
        }
      }
      margin-left: 1rem;
    }
  }
  div {
    display: inline-block;
  }
  .el-select,
  .el-input {
    width: 8rem;
    margin-right: 1rem;
  }
}
.sale-container {
  height: 30rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
